import React, {useState} from 'react';
import { Button } from 'antd';
import './Xiangqing.less'
// import image from '../../../assets/zhongli.png'
import { Card } from 'antd';
import { Table, Tag, Space } from 'antd';
import store from "../../../store/store";
import {toJS} from "mobx";
import {useEffect} from 'react'
import http from "../../../utils/http";


function Xiangqing(){
    let arr=toJS(store.xiangqingData)
    useEffect(()=>{
        http({
            url: 'api/goods/detailGoods',
            method: "post",
            params: {
                id:arr[0].id
            }
        }).then((res => {
            res.data.forEach(item=>{
                if (item.skuSales){
                    setData2(res.data)
                }else {
                    item.skuSales=0
                    setData2(res.data)
                }
            })
           
        }))
    },[])
   
  //进入页面就应该发送请求，获取商品其他型号信息  然后修改data2的值
  const xqBack=()=>{
    window.history.back(-1)
  }
  const tabList = [
    {
      key: 'tab1',
      tab: '商品spu信息',
    },
    {
      key: 'tab2',
      tab: '商品sku信息',
    },
  ];

  // console.log(ev)
  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
  const onTab1Change = key => {
    setActiveTabKey1(key);
  };
  const tab1 = [
        {
            title: '主图',
            align: 'center',
            dataIndex: '',
            key: 'img',
            width:'25%',
            render: (img, record) => (
                <img src={record.img} alt="" style={{width: 50, height: 50}}/>
            )
        },
        {
            title: '在售价（元）',
            dataIndex: 'price',
            key: 'price',
            width:'25%',
            align: 'center',
        },
        {
            title: '月销量（件）',
            dataIndex: 'salesNum',
            key: 'salesNum',
            width:'25%',
            align: 'center',
        },
        {
            title: '库存（件）',
            dataIndex: 'stockNum',
            key: 'stockNum',
            width:'25%',
            align: 'center',
        }
    ];
    const tab2 = [
        {
            title: '主图',
            align: 'center',
            dataIndex: 'image',
            key: 'image',
            width:'20%',
            render: (img, record) => (
                <img src={record.img} alt="" style={{width: 50, height: 50}}/>
            )
        },
        {
            title: '规格名称',
            dataIndex: 'specification',
            key: 'specification',
            width:'20%',
            align: 'center',
        },
        {
            title: '在售价（元）',
            dataIndex: 'price',
            key: 'price',
            width:'20%',
            align: 'center',
        },
        {
            title: '月销量（件）',
            dataIndex: 'skuSales',
            key: 'skuSales',
            width:'20%',
            align: 'center',
        },
        {
            title: '库存（件）',
            dataIndex: 'skuStock',
            key: 'skuStock',
            width:'20%',
            align: 'center',
        }
    ];
  //其他型号数据
  const [data2,setData2] = useState([])
    // 这个数据有list组件传过来,用来传染主图数据和标题等
  let contentList = {
    tab1: <Table columns={tab1} dataSource={arr} pagination={false}/>,
    tab2: <Table columns={tab2} dataSource={data2} pagination={false} />,
  };
  return(
      <div id='goodsType'>
        <div className='typeHeader'>
          <Button type="primary" onClick={xqBack}>返回</Button>
          <button className='typeMenu' type="button">商品列表 > 商品详情</button>
        </div>
        <div className='xqData'>
          <p> 商品ID：{arr[0].id}</p>
          <p>商品分类：{arr[0].typeName}</p>
          <p>商品名称：{arr[0].name}</p>
            {/*<p> 商品ID：{}</p>*/}
            {/*<p>商品分类：{}</p>*/}
            {/*<p>商品名称：{}</p>*/}
          <>
            <Card
                style={{ width: '100%' }}
                title="价格规格"
                tabList={tabList}
                activeTabKey={activeTabKey1}
                onTabChange={key => {
                  onTab1Change(key);
                }}
            >
              {contentList[activeTabKey1]}
            </Card>
          </>
        </div>
        </div>
  )
}

export default Xiangqing;